<script>
import {axiosGetPosts} from "../api";

  export default{
    name:"privatePosts",
    data(){
      return{
        startId:1,
        postList:[],
        total:1,
        page:1,
        imgList:[
          {
            img1:"",
            img2:"",
            img3:"",
            img4:"",
            img5:"",
          }
        ]
      }
    },
    beforeMount() {
      this.load();
    },
    methods:{
      async load(){
        let result = await axiosGetPosts({id: 1, number: 9999,method:"MPrivate",account:this.account});
        if (result.status === 200){
          this.postList = result.data.map((item)=>{
            return {
              ...item,
              imgList: this.imgList
            }
          })
          if (this.postList[0].postCount > 0) {
            this.total = result.data.postCount;
          }
        }
      },
      getPageNum(value){
        this.page = value;
        this.load();
      },
    },
  }
</script>

<template>
  <div id="privatePosts">
    <div class="middle-box">
      <div class="posts">
        <ul class="infinite-list">
          <li v-for="post in postList" class="infinite-list-item" style="margin-top:20px">
            <div class="post-style">
              <p @click="otherClick(post)">{{post.userName}}</p>
              <p @click="postClick(post)">{{post.title}}</p>
              <p @click="likeClick(post)">{{post.likeNum}}</p>
              <p @click="collectionClick(post)">{{post.collectionNum}}</p>
            </div>
            <div class="post-img">
              <img v-for="(item,index) in post.imgList" :key="index" :src="item" alt="">
            </div>
          </li>
        </ul>
      </div>
      <el-pagination
          :hide-on-single-page="true"
          :total="total"
          background
          layout="prev, pager, next"
          @current-change="getPageNum">
      </el-pagination>
    </div>
  </div>
</template>

<style scoped src="../style/privatePosts.css">

</style>